<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
<meta name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

    <meta name="author" content="baifangzi">




    <meta name="keywords" content="白房子">


<title>JS原型与原型链 | 白房子的博客</title>



    <link rel="icon" href="/favicon.ico">




    <!-- stylesheets list from _config.yml -->
    
    <link rel="stylesheet" href="/css/style.css">
    



    <!-- scripts list from _config.yml -->
    
    <script src="/js/script.js"></script>
    
    <script src="/js/tocbot.min.js"></script>
    



    
    
        
    


<meta name="generator" content="Hexo 4.2.1"></head>
<body class="dark-theme">
    <div class="wrapper">
        <header>
    <nav class="navbar">
        <div class="container">
            <div class="navbar-header header-logo"><a href="/">白房子的博客</a></div>

            <div class="menu navbar-right">
                
                    <a class="menu-item" href="/search">站内搜索</a>
                
                    <a class="menu-item" href="/archives">文章</a>
                
                    <a class="menu-item" href="/categories">分类</a>
                
                    <a class="menu-item" href="/tags">标签</a>
                
                    <a class="menu-item" href="/tools">工具</a>
                
                    <a class="menu-item" href="/about.html">关于</a>
                

            </div>
        </div>
    </nav>

    
    <nav class="navbar-mobile" id="nav-mobile">
        <div class="container">
            <div class="navbar-header">
                <div>
                    <a href="/">白房子的博客</a><a id="mobile-toggle-theme">路&nbsp;</a>
                </div>
                <div class="menu-toggle" onclick="mobileBtn()">&#9776; Menu</div>
            </div>
            <div class="menu" id="mobile-menu">
                
                    <a class="menu-item" href="/search">站内搜索</a>
                
                    <a class="menu-item" href="/archives">文章</a>
                
                    <a class="menu-item" href="/categories">分类</a>
                
                    <a class="menu-item" href="/tags">标签</a>
                
                    <a class="menu-item" href="/tools">工具</a>
                
                    <a class="menu-item" href="/about.html">关于</a>
                
            </div>
        </div>
    </nav>

</header>
<script>
    var mobileBtn = function f() {
        var toggleMenu = document.getElementsByClassName("menu-toggle")[0];
        var mobileMenu = document.getElementById("mobile-menu");
        if(toggleMenu.classList.contains("active")){
           toggleMenu.classList.remove("active")
            mobileMenu.classList.remove("active")
        }else{
            toggleMenu.classList.add("active")
            mobileMenu.classList.add("active")
        }
    }
</script>
        <div class="main">
            <div class="container">
    
    
        <div class="post-toc">
    <div class="tocbot-list">
    </div>
    <div class="tocbot-list-menu">
        <a class="tocbot-toc-expand" onclick="expand_toc()">全部展开</a>
        <a onclick="go_top()">返回顶部</a>
        <a onclick="go_bottom()">返回底部</a>
    </div>
</div>

<script>
    document.ready(
        function () {
            tocbot.init({
                tocSelector: '.tocbot-list',
                contentSelector: '.post-content',
                headingSelector: 'h1, h2, h3, h4, h5',
                collapseDepth: 1,
                orderedList: false,
                scrollSmooth: true,
            })
        }
    )

    function expand_toc() {
        var b = document.querySelector(".tocbot-toc-expand");
        tocbot.init({
            tocSelector: '.tocbot-list',
            contentSelector: '.post-content',
            headingSelector: 'h1, h2, h3, h4, h5',
            collapseDepth: 6,
            orderedList: false,
            scrollSmooth: true,
        });
        b.setAttribute("onclick", "collapse_toc()");
        b.innerHTML = "全部折叠"
    }

    function collapse_toc() {
        var b = document.querySelector(".tocbot-toc-expand");
        tocbot.init({
            tocSelector: '.tocbot-list',
            contentSelector: '.post-content',
            headingSelector: 'h1, h2, h3, h4, h5',
            collapseDepth: 1,
            orderedList: false,
            scrollSmooth: true,
        });
        b.setAttribute("onclick", "expand_toc()");
        b.innerHTML = "全部展开"
    }

    function go_top() {
        window.scrollTo(0, 0);
    }

    function go_bottom() {
        window.scrollTo(0, document.body.scrollHeight);
    }

</script>
    

    
    <article class="post-wrap">
        <header class="post-header">
            <h1 class="post-title">JS原型与原型链</h1>
            
                <div class="post-meta">
                    
                        作者: <a itemprop="author" rel="author" href="/">baifangzi</a>
                    

                    
                        <span class="post-time">
                        日期: <a href="#">八月 23, 2021&nbsp;&nbsp;19:44:53</a>
                        </span>
                    
                    
                </div>
            
        </header>

        <div class="post-content">
            <h3 id="基本概念"><a href="#基本概念" class="headerlink" title="基本概念"></a>基本概念</h3><ul>
<li><p>构造函数:new后面跟着的函数、<code>constructor</code>属性</p>
</li>
<li><p>原型、原型对象 ：<code>[构造函数].prototype</code></p>
</li>
<li><p>实例的私有属性、内部指针：<code>__proto__</code></p>
</li>
</ul>
<h3 id="原型链"><a href="#原型链" class="headerlink" title="原型链"></a>原型链</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">SuperType</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">this</span>.property = <span class="literal">true</span></span><br><span class="line">&#125;</span><br><span class="line">SuperType.prototype.getSuperValue = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">this</span>.property</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">SubType</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">this</span>.subproperty = <span class="literal">false</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 继承 SuperType</span></span><br><span class="line">SubType.prototype = <span class="keyword">new</span> SuperType()</span><br><span class="line">SubType.prototype.getSubValue = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">this</span>.subproperty</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> instance = <span class="keyword">new</span> SubType()</span><br><span class="line"><span class="comment">// console.log(instance.getSuperValue()) // true</span></span><br><span class="line"><span class="built_in">console</span>.log(instance)</span><br></pre></td></tr></table></figure>

<p><img src="https://gitee.com/baifangzi/blogimage/raw/master/img/20210623181207.png" alt="image-20210623181206180"></p>
<p><img src="https://gitee.com/baifangzi/blogimage/raw/master/img/20210623181318.png" alt="image-20210623181317176"></p>
<ul>
<li>对于<strong>箭头1</strong>来说，每个构造函数都有一个<code>prototype</code>属性，指向它的原型对象</li>
<li>对于<strong>箭头2</strong>来说，在new 一个实例对象的时候，会在实例对象<code>instance</code>中添加一个<code>__proto__</code>私有属性，指向构造函数的原型对象，综合1与2，可以得到<code>instance.__proto__==SubType.prototype</code></li>
<li>对于<strong>箭头3</strong>来说，每个原型对象里面都有一个<code>constructor</code>属性，指向它的构造函数</li>
</ul>
<ul>
<li>在这里，我们实现了一个简单的继承，当需要使用某个属性时，首先会从实例上查找，没有找到的话，就会去它的原型对象上查找，还没有的话，接着去原型的原型里面去找，这里想调用<code>instance.getSuperValue()</code>,查找顺序就是<code>instance--&gt;SubType.prototype--&gt;SuperType.prototype，</code></li>
</ul>
<h3 id="判断类型"><a href="#判断类型" class="headerlink" title="判断类型"></a>判断类型</h3><h4 id="instanceof"><a href="#instanceof" class="headerlink" title="instanceof"></a>instanceof</h4><p>instanceof是比较常见的判断类型的方法，如果一个实例的原型链中出现过对应的构造函数，那么就为<code>true</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(instance <span class="keyword">instanceof</span> <span class="built_in">Object</span>); <span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(instance <span class="keyword">instanceof</span> SuperType); <span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(instance <span class="keyword">instanceof</span> SubType); <span class="comment">// true</span></span><br></pre></td></tr></table></figure>

<h4 id="isPrototypeOf-NaN"><a href="#isPrototypeOf-NaN" class="headerlink" title="isPrototypeOf"></a>isPrototypeOf</h4><p>只要原型链中包含这个原型，这个方法就返回 true： </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.prototype.isPrototypeOf(instance)); <span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(SuperType.prototype.isPrototypeOf(instance)); <span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(SubType.prototype.isPrototypeOf(instance)); <span class="comment">// true</span></span><br></pre></td></tr></table></figure>

<h3 id="默认原型"><a href="#默认原型" class="headerlink" title="默认原型"></a>默认原型</h3><p>在最外层，其实还有一个默认的Object对象，它是所有对象的基础，是原型链的最末端</p>

        </div>

        
        <section class="post-tags">
            <div>
                <span>标签：</span>
                <span class="tag">
                    
                </span>
            </div>
            <div>
                <a href="javascript:window.history.back();">返回</a>
             
                <a href="/">回到首页</a>
            </div>
        </section>
        <section class="post-nav">
            
            
            <a class="next" rel="next" href="/2019/04/24/JS%E6%80%BB%E7%BB%93/">JS基础知识总结</a>
            
        </section>

    </article>
</div>

        </div>
        <footer id="footer" class="footer">
  <script type="text/javascript">document.write(unescape("%3Cspan id='cnzz_stat_icon_1280228628'%3E%3C/span%3E%3Cscript src='https://s9.cnzz.com/z_stat.php%3Fid%3D1280228628%26online%3D1%26show%3Dline' type='text/javascript'%3E%3C/script%3E"));</script>
</footer>

    </div>
</body>
</html>
